@charset "utf-8";
*{
    margin:0;
    padding:0;
}
$fontSize:40;
@function r($p){
    @return $p/$fontSize*1rem;
}
.login{
    border-radius: 20px;
    display: none;
    position: fixed;
    z-index: 9999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    font-size: 0;
    font-family: 苹方;
    width:r(999);
    background: #cee1fb;
    padding:r(90) 0;
    box-shadow:5px 5px 15px rgb(209, 207, 207);
    >article{
        display:flex;
        display:-webkit-flex;
        justify-content: space-around;
        align-items: center;
        // justify-items: center;
        >section{
            width:r(393);
            >img{
                width:100%;
                border-radius: 100%;
            }
        }//左边图片
        >.login_right{
            animation: fadeIn 1s;
            -webkit-animation: fadeIn 1s; 
            text-align: center;
            width:r(290);
            >h3{
                font-size:r(26);
                color:#000;
                margin-bottom:r(49);
            }
            >input{
                width:100%;
                margin-bottom:r(20);
                border-radius: 20px;
                border: 0;
                border: 1px solid #999;
                padding:r(10) r(25);
                &[type="submit"]{
                    color:#fff;
                    background: #6baaf5;
                }
            }//表单
            >p{
                font-size:r(16);
                color:#999;
                >span{
                    color: #6baaf5;
                    cursor: pointer;
                }
            }
        }
        >.register{
            display: none;
            animation: fadeIn 1s;
            -webkit-animation: fadeIn 1s; 
        }
    }

    >span{
        position: absolute;
        bottom:r(20);
        left:r(30);
        font-size: r(23);
        color:#6baaf5;
        cursor: pointer;
    }
}
@media only screen and (min-width: 768px)and (max-width:992px) {
    .login{
        width:r(1300);
        padding:r(150) 0;
        box-shadow:5px 5px 15px rgb(209, 207, 207);
        >article{
            >section{
                width:r(393);
                >img{
                    width:100%;
                    border-radius: 100%;
                }
            }//左边图片
            >.login_right{
                width:r(430);
                >h3{
                    font-size:r(26);
                    margin-bottom:r(49);
                }
                >input{
                    width:100%;
                    margin-bottom:r(20);
                    border-radius: 20px;
                    border: 0;
                    border: 1px solid #999;
                    padding:r(10) r(25);
                    &[type="submit"]{
                        color:#fff;
                        background: #6baaf5;
                    }
                }//表单
                >p{
                    font-size:r(18);
                    color:#999;
                    >span{
                        color: #6baaf5;
                        cursor: pointer;
                    }
                }
            }
        }
    
        >span{
            bottom:r(20);
            left:r(30);
            font-size: r(23);
        }
    }
}
@media only screen and (max-width: 768px) {
    .login{
        border-radius: 20px;
        width:90%;
        padding:r(90) 0;
        box-shadow:5px 5px 15px rgb(209, 207, 207);
        >article{
            display:flex;
            display:-webkit-flex;
            justify-content: space-around;
            align-items: center;
           
            // justify-items: center;
            >section{
                display: none;
      
            }//左边图片
            >.login_right{
                padding:30px 0;
                padding-top:20px;
                width:75%;
                >h3{
                    font-size:12px;
                    color:#000;
                    margin-bottom:r(100);
                }
                >input{
                    width:100%;
                    margin-bottom:20px;
                    border-radius: 20px;
                    border: 0;
                    border: 1px solid #999;
                    padding:r(20) r(25);
                    &[type="submit"]{
                        color:#fff;
                        background: #6baaf5;
                    }
                }//表单
                >p{
                    font-size:12px;
                    color:#999;
                    >span{
                        color: #6baaf5;
                        cursor: pointer;
                    }
                }
            }
            >.register{
                display: none;
                animation: fadeIn 1s;
                -webkit-animation: fadeIn 1s; 
            }
        }
    
        >span{
            position: absolute;
            bottom:10px;
            left:20px;
            font-size: r(23);
            color:#6baaf5;
            cursor: pointer;
        }
    }
}